<template>
	<vi-style-controller @click="onClick"
		compName="tag"
		:type="setting.type"
		:color="color"
		:textColor="textColor"
		:borderColor="borderColor"
		:backgroundColor="backgroundColor"
		:radius="setting.radius"
		:size="setting.size"
		:shadow="shadow"
		:width="width"
		:height="height"
		:borderWidth="setting.borderWidth"
		:borderType="borderType"
		:borderBox="borderBox"
		:spaceInside="spaceInside"
		:plain="plain"
		:disabled="disabled"
		:readOnly="readOnly"
		:alignLeft="alignLeft"
		inline
		active>
		<view :style="slotStyle">
			<slot></slot>
		</view>
	</vi-style-controller>
</template>

<script>
	export default {
		name:"viTag",
		props:{
			//标签主题色
			type:{
				type:[String,null],
				default:null
			},
			//标签自定义颜色
			color:{
				type:[String,null],
				default:""
			},
			//固定文字颜色
			textColor:{
				type:[String,null],
				default:""
			},
			//固定边框颜色
			borderColor:{
				type:[String,null],
				default:""
			},
			borderType:{
				type:[String,null],
				default:""
			},
			borderBox:{
				type:[Boolean,null],
				default:false
			},
			//固定背景颜色
			backgroundColor:{
				type:[String,null],
				default:""
			},
			//标签圆角，可选值square、circle，以及数值带单位
			radius:{
				type:[String,Number,Array,null],
				default:null
			},
			//标签尺寸
			size:{
				type:[String,null],
				default:null
			},
			//镂空
			plain:{
				type:[Boolean,null],
				default:false
			},
			//额外自定义
			width:{
				type:[Number,String,null],
				default:0
			},
			height:{
				type:[Number,String,null],
				default:0
			},
			borderWidth:{
				type:[Number,String,null],
				default:null
			},
			spaceInside:{
				type:[Number,String,Array,null],
				default:null
			},
			fontSize:{
				type:[String,null],
				default:""
			},
			//加粗
			bold:{
				type:[Boolean,null],
				default:false
			},
			// 居左
			alignLeft:{
				type:[Boolean,null],
				default:false
			},
			shadow:{
				type:[String,null],
				default:""
			},
			//禁用
			disabled:{
				type:[Boolean,null],
				default:false
			},
			//只读
			readOnly:{
				type:[Boolean,null],
				default:false
			},
		},
		data(){
			return {
				
			}
		},
		computed:{
			//将默认值内含到css、计算属性等地方，只内含真值
			//规避特殊使用的情况下，由prop传入undefined、null等无效数据导致的，默认值失效问题。例如组件嵌套且需要组件间参数传递
			//HBuilder X3.3.13; 微信开发者工具stable 1.05.2111300
			//微信小程序会对传入的undefined、null值根据参数类型输出不同空值(false、""、null、0)，参数类型为null或未指定参数类型则输出null
			//H5会对传入的undefined取默认值，未设默认值则输出undefined。对传入的null值固定输出null
			//做参数传递时需警惕两者行为不同而造成的陷阱，主要问题出现在微信小程序的空值转化，输出非用户传入的空值、假值，使默认真值丢失
			//兼容空值取默认值的可行方案目前为，参数类型加入null如[Boolean,null]，判断传入参数是否为定义的类型，是则使用，否则赋予默认值
			setting(){
				return {
					type: this.$api.isDefined(this.type)? this.type :"primary",
					radius: this.$api.isDefined(this.radius)? this.radius :"square",
					size: this.$api.isDefined(this.size)? this.size :"md",
					borderWidth: this.$api.isValue(this.borderWidth)? this.borderWidth :1,
				}
			},
			slotStyle(){
				let res ={
					"line-height":1
				};
				if(this.fontSize){
					res["font-size"] = this.fontSize
				}
				if(this.bold){
					res["font-weight"] = "bold"
				}
				return this.$api.objToStr(res)
			},
		},
		methods: {
			onClick(){
				if(!this.disabled && !this.readOnly){
					this.$emit("click");
				}
			}
		},
	}
</script>

<style>

</style>
